<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import {ref} from 'vue'

// const SelectList = reactive([
//   {
//     title: '类型',
//     select: [
//       {
//         name: 'H5',
//         value: 0,
//         route: 'h5'
//       },
//       {
//         name: '海报',
//         value: 0,
//         route: '海报'
//       },
//       {
//         name: '长页',
//         value: 0,
//         route: '长页'
//       },
//       {
//         name: '电子画册',
//         value: 0,
//         route: '电子画册'
//       },
//       {
//         name: '表单',
//         value: 0,
//         route: '表单'
//       },
//       {
//         name: '互动',
//         value: 0,
//         route: '互动'
//       },
//       {
//         name: '视频',
//         value: 0,
//         route: '视频'
//       },
//       {
//         name: '解决方案',
//         value: 0,
//         route: '解决方案'
//       }
//     ]
//   },
//   {
//     title: '用途',
//     select: [
//       {
//         name: '邀请函'
//       },
//       {
//         name: '人才招聘'
//       },
//       {
//         name: '培训招生'
//       },
//       {
//         name: '宣传介绍'
//       },
//       {
//         name: '活动促销'
//       },
//       {
//         name: '通知公告'
//       },
//       {
//         name: '祝福问候'
//       },
//       {
//         name: '行政办公'
//       },
//       {
//         name: '人物介绍'
//       },
//       {
//         name: '心情日签'
//       },
//       {
//         name: '音乐相册'
//       },
//       {
//         name: '总结汇报'
//       },
//       {
//         name: '表单信息'
//       }
//     ]
//   },
//   {
//     title: '行业',
//     select: [
//       {
//         name: '教育培训'
//       },
//       {
//         name: '卫生医疗'
//       },
//       {
//         name: '理财保险'
//       },
//       {
//         name: '家居装修'
//       },
//       {
//         name: '网络科技'
//       },
//       {
//         name: '文体娱乐'
//       },
//       {
//         name: '酒店旅游'
//       },
//       {
//         name: '餐饮美食'
//       },
//       {
//         name: '房地产'
//       },
//       {
//         name: '服装修饰'
//       },
//       {
//         name: '汽车行业'
//       },
//       {
//         name: '数码家电'
//       },
//       {
//         name: '农业园林'
//       },
//       {
//         name: '能源行业'
//       },
//       {
//         name: '批发零售'
//       },
//       {
//         name: '生活服务'
//       },
//       {
//         name: '企业服务'
//       },
//       {
//         name: '政府公益'
//       },
//       {
//         name: '其他'
//       }
//     ]
//   },
//   {
//     title: '其他',
//     select: [
//       {
//         name: '节假',
//         more: 0,
//         children: [
//           {
//             name: '24节气'
//           },
//           {
//             name: '纪念日'
//           },
//           {
//             name: '元旦'
//           },
//           {
//             name: '双十一'
//           },
//           {
//             name: '万圣节'
//           },
//           {
//             name: '感恩节'
//           },
//           {
//             name: '重阳节'
//           },
//           {
//             name: '腊八节'
//           },
//           {
//             name: '双十二'
//           },
//           {
//             name: '其他'
//           },
//           {
//             name: '圣诞节'
//           }
//         ]
//       },
//       {
//         name: '风格',
//         children: [
//           {
//             name: '炫彩'
//           },
//           {
//             name: '鎏金'
//           },
//           {
//             name: '手绘'
//           },
//           {
//             name: '卡通'
//           },
//           {
//             name: '搞笑'
//           },
//           {
//             name: '创意'
//           },
//           {
//             name: '清新'
//           },
//           {
//             name: '商务'
//           },
//           {
//             name: '科技'
//           }
//         ]
//       },
//       {
//         name: '功能',
//         children: [
//           {
//             name: '炫彩'
//           },
//           {
//             name: '鎏金'
//           },
//           {
//             name: '手绘'
//           },
//           {
//             name: '卡通'
//           },
//           {
//             name: '搞笑'
//           },
//           {
//             name: '创意'
//           },
//           {
//             name: '清新'
//           },
//           {
//             name: '商务'
//           },
//           {
//             name: '科技'
//           }
//         ]
//       },
//       {
//         name: '场景',
//         children: [
//           {
//             name: '炫彩'
//           },
//           {
//             name: '鎏金'
//           },
//           {
//             name: '手绘'
//           },
//           {
//             name: '卡通'
//           },
//           {
//             name: '搞笑'
//           },
//           {
//             name: '创意'
//           },
//           {
//             name: '清新'
//           },
//           {
//             name: '商务'
//           },
//           {
//             name: '科技'
//           }
//         ]
//       },
//       {
//         name: '表单',
//         children: [
//           {
//             name: '炫彩'
//           },
//           {
//             name: '鎏金'
//           },
//           {
//             name: '手绘'
//           },
//           {
//             name: '卡通'
//           },
//           {
//             name: '搞笑'
//           },
//           {
//             name: '创意'
//           },
//           {
//             name: '清新'
//           },
//           {
//             name: '商务'
//           },
//           {
//             name: '科技'
//           }
//         ]
//       },
//       {
//         name: '游戏',
//         children: [
//           {
//             name: '炫彩'
//           },
//           {
//             name: '鎏金'
//           },
//           {
//             name: '手绘'
//           },
//           {
//             name: '卡通'
//           },
//           {
//             name: '搞笑'
//           },
//           {
//             name: '创意'
//           },
//           {
//             name: '清新'
//           },
//           {
//             name: '商务'
//           },
//           {
//             name: '科技'
//           }
//         ]
//       }
//     ]
//   }
// ])
const typeList = ref({
  title:"类型",
  select:[
    {
    name: "H5",
    value: 0,
    route: "h5",
  },
  {
    name: "海报",
    value: 0,
    route: "海报",
  },
  {
    name: "长页",
    value: 0,
    route: "长页",
  },
  {
    name: "电子画册",
    value: 0,
    route: "电子画册",
  },
  {
    name: "表单",
    value: 0,
    route: "表单",
  },
  {
    name: "互动",
    value: 0,
    route: "互动",
  },
  {
    name: "视频",
    value: 0,
    route: "视频",
  },
  {
    name: "解决方案",
    value: 0,
    route: "解决方案",
  },]
  
});
const useList = ref({
  title:"用途",
  select:[{
    name: "邀请函",
  },
  {
    name: "人才招聘",
  },
  {
    name: "培训招生",
  },
  {
    name: "宣传介绍",
  },
  {
    name: "活动促销",
  },
  {
    name: "通知公告",
  },
  {
    name: "祝福问候",
  },
  {
    name: "行政办公",
  },
  {
    name: "人物介绍",
  },
  {
    name: "心情日签",
  },
  {
    name: "音乐相册",
  },
  {
    name: "总结汇报",
  },
  {
    name: "表单信息",
  },]
});
const workList = ref({
title:"行业",
select:[
  {
    name: "教育培训",
  },
  {
    name: "卫生医疗",
  },
  {
    name: "理财保险",
  },
  {
    name: "家居装修",
  },
  {
    name: "网络科技",
  },
  {
    name: "文体娱乐",
  },
  {
    name: "酒店旅游",
  },
  {
    name: "餐饮美食",
  },
  {
    name: "房地产",
  },
  {
    name: "服装修饰",
  },
  {
    name: "汽车行业",
  },
  {
    name: "数码家电",
  },
  {
    name: "农业园林",
  },
  {
    name: "能源行业",
  },
  {
    name: "批发零售",
  }
]
});
const workMoreList=ref({
  select:[
  {
    name: "生活服务",
  },
  {
    name: "企业服务",
  },
  {
    name: "政府公益",
  },
  {
    name: "其他",
  },
]
  
})
const otherList = ref({
  title:"其他",
      select: [
      {
        name: '节假',
        more: 0,
        children: [
          {
            name: '24节气'
          },
          {
            name: '纪念日'
          },
          {
            name: '元旦'
          },
          {
            name: '双十一'
          },
          {
            name: '万圣节'
          },
          {
            name: '感恩节'
          },
          {
            name: '重阳节'
          },
          {
            name: '腊八节'
          },
          {
            name: '双十二'
          },
          {
            name: '其他'
          },
          {
            name: '圣诞节'
          }
        ]
      },
      {
        name: '风格',
        children: [
          {
            name: '炫彩'
          },
          {
            name: '鎏金'
          },
          {
            name: '手绘'
          },
          {
            name: '卡通'
          },
          {
            name: '搞笑'
          },
          {
            name: '创意'
          },
          {
            name: '清新'
          },
          {
            name: '商务'
          },
          {
            name: '科技'
          }
        ]
      },
      {
        name: '功能',
        children: [
          {
            name: '炫彩'
          },
          {
            name: '鎏金'
          },
          {
            name: '手绘'
          },
          {
            name: '卡通'
          },
          {
            name: '搞笑'
          },
          {
            name: '创意'
          },
          {
            name: '清新'
          },
          {
            name: '商务'
          },
          {
            name: '科技'
          }
        ]
      },
      {
        name: '场景',
        children: [
          {
            name: '炫彩'
          },
          {
            name: '鎏金'
          },
          {
            name: '手绘'
          },
          {
            name: '卡通'
          },
          {
            name: '搞笑'
          },
          {
            name: '创意'
          },
          {
            name: '清新'
          },
          {
            name: '商务'
          },
          {
            name: '科技'
          }
        ]
      },
      {
        name: '表单',
        children: [
          {
            name: '炫彩'
          },
          {
            name: '鎏金'
          },
          {
            name: '手绘'
          },
          {
            name: '卡通'
          },
          {
            name: '搞笑'
          },
          {
            name: '创意'
          },
          {
            name: '清新'
          },
          {
            name: '商务'
          },
          {
            name: '科技'
          }
        ]
      },
      {
        name: '游戏',
        children: [
          {
            name: '炫彩'
          },
          {
            name: '鎏金'
          },
          {
            name: '手绘'
          },
          {
            name: '卡通'
          },
          {
            name: '搞笑'
          },
          {
            name: '创意'
          },
          {
            name: '清新'
          },
          {
            name: '商务'
          },
          {
            name: '科技'
          }
        ]
      }
    ]
})
const  ArrowDownBold = ref()
const currentClass=ref(null)
const currentIndex:any = ref(0)
const show=ref(false)
const show2=ref(false)
const tag=ref("")
const showMore = () => {
  show.value = true
}
const changeIndex = (index:number) =>{
  currentIndex.value = index
  currentClass.value =currentIndex.value
  console.log(currentClass.value);
  show2.value = true
}
const checkTag = (e:any) => {
  console.log(e.srcElement.innerText);
  tag.value = e.srcElement.innerText;
}
const clearTag = () => {
  tag.value = ""
}
//比较大小
const compaireObject=(poxyname:any)=>{
  return function (obj1:any,obj2:any){
    var value1=obj1[poxyname]
    var value2=obj2[poxyname]
    if(value1<value2){111
      return -1
    }else if(value1>value2){
      return 1
    }else{
      return 0
    }
  }
}

</script>
<template>
  <div class="moreView">
    <!-- 面包屑 -->
    <div class="Breadcrumb">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
        <el-breadcrumb-item>promotion management</el-breadcrumb-item>
        <el-breadcrumb-item v-if="tag !=''"><div class="hidden_tag">{{ tag }} <div @click="clearTag">X</div></div></el-breadcrumb-item>
        <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 选择项盒子 -->
    <div class="moreView_header">
      <div class="moreView_header_p">
        <div class="moreView_header_p_left">{{ typeList.title }}</div>
        <div class="moreView_header_p_right"><div class="moreView_header_p_right_over" ><div class="moreView_header_p_right_over_list" ref="list"><div v-for="(v,i) in typeList.select" :key="i" @click="checkTag"> {{ v.name }}</div></div></div></div>
      </div>
      <div class="moreView_header_p">
        <div class="moreView_header_p_left">{{ useList.title }}</div>
        <div class="moreView_header_p_right"><div class="moreView_header_p_right_over" ><div class="moreView_header_p_right_over_list" ref="list"><div v-for="(v,i) in useList.select" :key="i" @click="checkTag"> {{ v.name }}</div></div></div></div>
      </div>
      <div class="moreView_header_p" :class="show===true?'hangye':'moreView_header_p'">
        <div class="moreView_header_p_left">{{ workList.title }}</div>
        <div class="moreView_header_p_right"><div class="moreView_header_p_right_over" ><div class="moreView_header_p_right_over_list" ref="list"><div v-for="(v,i) in workList.select" :key="i" @click="checkTag"> {{ v.name }}</div></div></div><div @click="showMore">更多</div></div>
        <div class="workMoreList" v-show="show"><div class="moreView_header_p_right_over" ><div class="moreView_header_p_right_over_list" ref="list"><div v-for="(v,i) in workMoreList.select" :key="i" @click="checkTag"> {{ v.name }}</div></div></div></div>
      </div>
      <div class="moreView_header_p" :class="show2===true?'qita':'moreView_header_p'">
        <div class="moreView_header_p_left">{{ otherList.title }}</div>
        <div class="moreView_header_p_right"><div class="moreView_header_p_right_over" ><div class="moreView_header_p_right_over_list" ref="list"><div @click="changeIndex(index)" v-for="(v,index) in otherList.select" :key="index"><div :class="{'blue':currentClass===index}">{{ v.name }}<el-icon ><ArrowDownBold /></el-icon></div> </div></div></div></div>
        <div class="otherChildList" v-show="show2"><div class="moreView_header_p_right_over" ><div class="moreView_header_p_right_over_list" ref="list"><div v-for="(v,index) in otherList.select[currentIndex].children" :key="index" @click="checkTag"> {{ v.name }}</div></div></div></div>
      </div>
    </div>
    <!-- 功能栏 -->
    <div class="moreView_select">
        <div>综合排序</div>
        <div>最新</div>
        <div>最热</div>
        <div>价格</div>
        <div>|</div>
        <div>颜色 <div></div></div>
        <div>|</div>
        <div>版式:<div></div></div>
        <div>|</div>
        <div>视频时长:<div></div></div>
        <div>|</div>
        <div>价格:<div></div></div>
    </div>

  </div>
</template>
<style  scoped>
  .moreView{
    width: 1590px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-left: 120px;
  }
  .Breadcrumb{
    width: 100%;
    height: 40px;
    line-height: 40px;
  }
  .hidden_tag{
    font-size: 12px;
    display: flex;
    justify-content: left;
  }
  .moreView_header{
     width: 100%;
     line-height: 40px;
  }
  .moreView_header_p{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .moreView_header_p_left{
    width: 44px;
    font-size: 18px;
    font-weight: 600;
  }
   .moreView_header_p_right{
    display: flex;
    width: 1460px;
    font-size: 16px;
  }
  .moreView_header_p_right .moreView_header_p_right_over{
    width: 1346px;
    overflow: hidden;
    justify-content: left;

  }
   .moreView_header_p_right_over_list{
    display: flex;
    width: 1346px;
    overflow: hidden;
    word-wrap: break-word;
  }
  .moreView_header_p_right_over_list>div{
    margin-right: 10px;
    width: 80px;
    text-align: center;
  }
 
  .moreView_header_p_right_over_list>div:hover{
    color:#048cfb;
  }
  
  .more_icon{
    width: 80px;
    text-align: right;
  }
  .hangye{
    height: 80px;
    position: relative;
  }
  .workMoreList{
    position: absolute;
    left: 44px;
    font-size: 16px;
    bottom: 0;
  }
   .qita{
    height: 80px;
    position: relative;
  }
  .qita .moreView_header_p_right_over_list>div:active{
    background-color: #a9d0f0;
  }
  .otherChildList{
    font-size: 16px;
    position: absolute;
    left: 43px;
    bottom: 0;
    background: #a2cbec;
  }
  .blue{
    background-color: #a2cbec;
  }
  .moreView_select{
    display: flex;
    justify-content: left;
    margin-top: 20px;
  }
   .moreView_select>div{
    margin-right: 40px;
   }
</style>